/*
 * Copyright 2017 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "SidecarCommon.css";

$toolbar-height: 1.5rem;

.kui--sidecar {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;

  transition-property: background-color, color, border-color;
  transition-duration: calc(var(--transition-duration) * 2); /* twice the normal duration */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  background: var(--color-sidecar-background-01);

  .header-top-bits {
    display: flex;
    padding-left: 1em;
  }

  .sidecar-header-text {
    margin: 0 0 0.75em 0;
    font-size: 22px;
  }

  .sidecar-bottom-stripe {
    flex-basis: 2.5em;
    display: flex;
    background-color: var(--color-stripe-02);
    /* border-bottom: 1px inset var(--color-ui-02); */
  }
  .sidecar-bottom-stripe-left-bits,
  .sidecar-bottom-stripe-left-bits .sidecar-bottom-stripe-button-container {
    /* button container in sidecar bottom stripe */
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .sidecar-bottom-stripe-left-bits .sidecar-bottom-stripe-button-container.sidecar-bottom-stripe-back-bits {
    /* back button container in sidecar bottom stripe */
    flex: 0 0 0%;
    min-width: 0;
  }

  .sidecar-bottom-stripe-left-bits
    .sidecar-bottom-stripe-button-container.sidecar-bottom-stripe-back-bits.has-back-button {
    flex: initial;
    margin-right: 0;
    padding: 0 calc(1em - 0.375em); /* the button inside has 0.375em padding left-right */
  }
  .sidecar-bottom-stripe-close-icon {
    letter-spacing: -1ex;
    opacity: 0.6;
    transition-property: all;
  }

  .sidecar-bottom-stripe .package-prefix {
    /* kubectl namespace and openwhisk package name, etc. */
    display: block;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidecar-header .limits {
    /* don't show limits in header for now */
    display: none;
  }
}

/* sidecar view-button "flush right" toolbar */
body[kui-theme-style] .sidecar-bottom-stripe-toolbar {
  display: flex;
  overflow: visible; /* for tooltip visibility */

  .sidecar-toolbar-text {
    p {
      font-size: inherit;
    }
    em {
      padding: 0.125em 1em;
      margin: 0 1.25em;
      font-style: normal;
      display: inline-block;
      color: var(--color-sidecar-toolbar-background);
      background-color: var(--color-sidecar-toolbar-foreground);
      border-radius: 0.9375em;
      mix-blend-mode: difference;
    }
  }

  .sidecar-toolbar-text {
    align-items: center;
  }

  .sidecar-toolbar-text,
  .sidecar-bottom-stripe-mode-bits {
    background-color: var(--color-sidecar-toolbar-background);
    color: var(--color-sidecar-toolbar-foreground);
    height: $toolbar-height;
    line-height: $toolbar-height;
    display: flex;
    flex: 1;
    overflow: visible; /* for tooltip visibility */
  }

  .sidecar-toolbar-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidecar-toolbar-text svg path {
    fill: var(--color-sidecar-toolbar-foreground);
    &[data-icon-path="inner-path"] {
      fill: var(--color-text-01);
    }
  }
  .sidecar-toolbar-text[data-type="warning"] svg path {
    fill: var(--color-base0A);
    stroke: var(--color-base00);
    stroke-width: 4%;
  }

  .sidecar-toolbar-text[data-type="warning"] svg path[data-icon-path="inner-path"],
  .sidecar-toolbar-text[data-type="error"] svg path[data-icon-path="inner-path"] {
    fill: var(--color-white);
  }
  .sidecar-toolbar-text[data-type="error"] svg path {
    fill: var(--color-error);
    stroke: var(--color-base00);
  }
  .sidecar-toolbar-text:not([data-type]),
  .sidecar-bottom-stripe-mode-bits.sidecar-bottom-stripe-button-container:empty {
    display: none !important;
  }
  .sidecar-toolbar-text:not([data-type])
    + .sidecar-bottom-stripe-mode-bits.sidecar-bottom-stripe-button-container:not(:empty) {
    flex: 1;
  }
  .sidecar-toolbar-text-icon {
    margin-right: 0.375em;
    padding-left: 1em;
  }
  .sidecar-toolbar-text-icon > svg {
    display: none;
  }
  .sidecar-toolbar-text[data-type] svg {
    display: block;
  }
  .sidecar-toolbar-text .sidecar-toolbar-text-content {
    font-size: calc(12em / 16);
    display: block;
    letter-spacing: 0.32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .sidecar-bottom-stripe-button {
    padding: 3px;
    margin: 1px 0;
    display: flex;
    line-height: 1.5em;
    align-items: center;

    button[aria-label="Actions"] {
      padding: 0;
    }

    [role="tab"] {
      display: flex;
    }
  }
  .graphical-icon svg {
    fill: var(--color-sidecar-toolbar-foreground);
  }
  .sidecar-bottom-stripe-mode-bits.sidecar-bottom-stripe-button-container {
    padding: 0 0.375em 0 1em;
    display: flex;
    flex: initial;
  }

  .sidecar-toolbar-text a,
  .sidecar-toolbar-text a:hover {
    color: inherit !important;
  }
}

.kui--sidecar {
  .sidecar-content-container,
  .custom-content {
    display: flex;
    flex: 1;
    min-height: 0; /* without this, in firefox wskflow pushes the bottom stripe off the bottom of the viewport */
  }
}

.kui--sidecar .sidecar-header {
  display: flex;
  background-color: var(--color-sidecar-header);
  min-height: 1em;

  .header-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    /* this is needed to work around firefox's odd behavior with nested
   flex boxes versus text-overflow; see
   https://github.com/IBM/kui/issues/1334 */
    min-width: 0;
  }
  .header-left-bits {
    flex: 1;
  }
  .header-right-bits {
    white-space: nowrap;
    margin-left: 1em;
    margin-right: 5px; /* matching titlebar */

    .custom-header-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: flex-end;
      justify-content: space-evenly;
    }
  }
  .sidecar-header-text {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .badges {
    margin-left: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    &:first-child {
      margin-left: 0;
    }
  }
}

.kui--sidecar .sidecar-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kui--sidecar .sidecar-content > div,
.kui--sidecar .custom-content pre > code,
.kui--sidecar .padding-content {
  display: block;
  padding: 1em;
}
.kui--sidecar .custom-content > .scrollable {
  /* for scrollable padding-content, we want the scrollbar to be flush-right */
  flex: 1;
}
.kui--sidecar pre {
  /* no margin for action source code */
  margin: 0;
}

/* generic */
.kui--sidecar .present-as-quotation {
  border-left-color: var(--color-base02);
}
.kui--sidecar .result-as-table .big-top-pad:first-child {
  margin-top: 0;
}
.code-highlighting.scrollable {
  /* sidecar custom entity container */
  flex: 1;
}
.kui--sidecar .activation-result .log-line .log-field code {
  font-size: 1em;
  margin: 0.375em 0.375em 0 0;
  padding: 1em;
  background: var(--color-ui-01);
  border: 1px solid var(--color-ui-04);
  box-shadow: 0 0 2px var(--color-ui-04);
}
.kui--sidecar .activation-result .log-line .log-field > div > div:first-child code {
  margin-top: 0;
}
.kui--sidecar .log-lines:not(.log-lines-loose) .log-line {
  height: auto;
}
.kui--sidecar .log-lines .log-line:nth-child(2n) .log-field {
  background: var(--color-ui-03); /* <-- zebra */
}

.kui--sidecar.no-icon .sidecar-header-icon-wrapper .sidecar-header-icon {
  display: none;
}
.kui--sidecar .activation-result {
  padding: 0;
}

/* used by bottom-stripe to flush-right buttons */
.fill-container {
  flex: 1;
  display: flex;
}
.fill-container.flush-right {
  justify-content: flex-end;
}

.kui--sidecar .sidecar-header-icon-wrapper > span {
  padding: 0 0.5em;
}

/* grabbable elements */
.grabbable {
  cursor: -webkit-grab;
}
.grabbable:active {
  cursor: -webkit-grabbing;
}

/* usage */
.kui--sidecar .usage-error-wrapper .hideable {
  background: transparent;
}
.kui--sidecar .page-content pre > code {
  display: inline-block;
  white-space: pre-wrap;
  padding: 0;
  color: var(--color-base0E);
}
.kui--sidecar .result-table [data-tag="badge"].green-background:not(.badge-as-image):before {
  background-color: var(--color-green-sidecar);
}
.kui--sidecar [data-tag="badge"].yellow-background:not(.badge-as-image):before {
  background: var(--color-yellow-sidecar);
}
.kui--sidecar .result-table [data-tag="badge"].red-background:not(.badge-as-image):before {
  background: var(--color-red-sidecar);
}
/* Duplicate rule with line 2049 in ui.css */
.kui--sidecar.activation-success-false .sidecar-header-icon {
  color: var(--color-red);
}
.kui--sidecar .sidecar-header [data-tag="badge"].version {
  /* badge for resource version */
  background-color: var(--color-tag-ibm-fill);
  color: var(--color-tag-ibm-text);
}
.kui--sidecar .sidecar-header [data-tag="badge"].red-background {
  background-color: var(--color-red);
  color: var(--color-base00);
}
.kui--sidecar .sidecar-header [data-tag="badge"].yellow-background {
  background-color: var(--color-yellow);
  color: var(--color-base01);
}
.kui--sidecar .sidecar-header [data-tag="badge"].green-background {
  background-color: var(--color-green);
}
.kui--sidecar .sidecar-header [data-tag="badge"].scope {
  background-color: var(--color-base0E);
  color: var(--color-base01);
}

/* sidecar bottom stripe */
.sidecar-bottom-stripe {
  color: var(--color-text-01);
  background: var(--color-stripe-02);

  .sidecar-bottom-stripe-right-bits,
  .sidecar-non-window-buttons,
  .sidecar-window-buttons {
    display: flex;
  }
  .sidecar-bottom-stripe-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.375em;

    & > div,
    a,
    button {
      padding: 3px;
      display: flex;
      color: var(--color-text-01);

      svg {
        fill: currentColor;
      }
    }

    button.disabled svg {
      fill: var(--color-text-02);
    }

    &:not(.disabled):hover {
      a,
      button {
        background-color: var(--color-table-border1);
        svg {
          fill: currentColor;
        }
      }
    }
  }
}

.kui--sidecar .custom-content .log-field pre > code {
  padding: 1em;
}

.kui--sidecar.visible .kui--sidecar-header-and-body {
  display: flex;
  flex: 1;
  overflow-y: hidden;
}

.kui--sidecar .sidecar-content-container {
  flex-direction: column;
}

.kui--sidecar-header-and-toolbar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kui--sidecar--titlebar-navigation:not(:empty) {
  display: flex;
  align-items: center;
  overflow-x: hidden;
  padding-left: 1em;

  .sidecar-bottom-stripe-button:nth-child(2) {
    margin-right: 1em;
  }
}

/* .kui--sidecar[data-view="topnav"] {
  .kui--data-table-wrapper {
    margin: 1em 0;
  }
} */
